<%@ page language="java" pageEncoding="UTF-8"%>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html lang="en">

  <head>
    <title>Cytoscape Web example</title>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/min/json2.min.js"></script>
    <script src="js/min/AC_OETags.min.js"></script>
    <script src="js/min/cytoscapeweb.min.js"></script>
    <script src="js/min2/BlobBuilder.js"></script>
    <style>
      /* The Cytoscape Web container must have its dimensions set. */

      #cytoscapeweb {
        width: 100%;
        height: 500px;
      }
    </style>
  </head>

  <body>
    <%@include file="menu.jsp" %>
      </div>
      <div id="page">
        <div id="content">
          <div class="post">
            <h2 class="title">The NetworkGraph</h2>
            <div id="cytoscapeweb">
              Cytoscape Web will replace the contents of this div with your graph.
            </div>
          </div>
        </div>
        <div style="clear: both;">&nbsp;</div>
      </div>
      <!-- end #page -->
      <%@include file="foot.jsp" %>
        <!-- end #footer -->
  </body>
  <script type="text/javascript">
    window.onload = function() {
      // id of Cytoscape Web container div
      var div_id = "cytoscapeweb";

      // NOTE: - the attributes on nodes and edges
      //       - it also has directed edges, which will automatically display edge arrows

      $.ajax({
        type: "GET",
        url: "graphAction.action",
        data: {
          id1: id1,
          id2: id2
        },
        success: function(data) {
          // var genelist = JSON.parse(data); 
          addNodes(data.list1);
          addNodes(data.list2);
          addEdges("n1", data.list1);
          addEdges("n2", data.list2);
        }
      });

      // visual style we will use
      var visual_style = {
        nodes: {
          shape: {
            discreteMapper: {
              attrName: "weight",
              entries: [{
                attrValue: "parent",
                value: "RECTANGLE"
              }]
            }
          },
          color: {
            discreteMapper: {
              attrName: "weight",
              entries: [{
                attrValue: "parent",
                value: "#D74E7C"
              }, {
                attrValue: "Gene",
                value: "#FFFFFF"
              }]
            }
          },
          opacity: {
            discreteMapper: {
              attrName: "weight",
              entries: [{
                attrValue: "parent",
                value: 1
              }, {
                attrValue: "Gene",
                value: 1
              }]
            }
          },
          borderWidth: 1,
          labelHorizontalAnchor: "bottom"
        },
        edges: {
          width: 3
        }
      };

      // initialization options
      var options = {
        swfPath: "swf/CytoscapeWeb",
        flashInstallerPath: "swf/playerProductInstall"
      };

      var vis = new org.cytoscapeweb.Visualization(div_id, options);

      var layoutname = ["ForceDirected", "Circle", "Radial", "Tree"];
      var idlayoutname = 0;
      var draw_options = {
        // your data goes here
        // network: xml,
        network: networ_json,

        // show edge labels too
        // edgeLabelsVisible: true,

        // let's try another layout
        // layout: "ForceDirected",
        layout: layoutname[0],

        // set the style at initialisation
        visualStyle: visual_style,

        // hide pan zoom
        panZoomControlVisible: true
      };

      vis.ready(function() {
        // set the style programmatically
        document.getElementById("layout").onclick = function() {
          idlayoutname = (idlayoutname + 1) % 4;
          var layoutS = document.getElementById("layoutSelect");
          layoutS.options[idlayoutname].selected = true;
          vis.layout(layoutname[(idlayoutname)]);
        };

        document.getElementById("layoutSelect").onchange = function() {
          var layoutS = document.getElementById("layoutSelect");
          idlayoutname = parseInt(layoutS.options[layoutS.selectedIndex].value);
          vis.layout(layoutname[(idlayoutname)]);

        };

        vis.addListener("click", "nodes", function(event) {
          handle_click(event);
        }).addListener("click", "edges", function(event) {
          handle_click(event);
        });

        function handle_click(event) {
          var target = event.target;
          clear();
          for (var i in target.data) {
            var variable_name = i;
            var variable_value = target.data[i];
            if ((variable_name == "label" || variable_name == "weight") && variable_value != "parent")
              if (colormapping(variable_value) == "")
                print(variable_value);
              else {
                print("<font color=" + colormapping(variable_value) + ">" + variable_value + "</font>");
              }
          }
        }

        function colormapping(color) {
          if (color == "Disease") {
            return "#D74E7C";
          } else if (color == "Gene") {
            return "#7495C0";
          } else {
            return "";
          }
        }
      });

      vis.draw(draw_options);
    };

    // 
    function addNodes(list) {
      for (var geneid of list) {
        var node = new diyNode(geneid, geneid, "Gene");
        networ_json.data.nodes.push(node);
      }
    }

    function addEdges(nodeid, list) {
      if (Array.isArray(list))
        for (var geneid of list) {
          var line = new diyLine(geneid, geneid, nodeid, geneid);
          networ_json.data.edges.push(line);
        }
      else {
        alert(nodeid + " is not a array");
      }
    }

    function diyNode(id, label, weight) {
      this.id = id;
      this.label = label;
      this.weight = weight;
    }

    function diyLine(id, label, source, target) {
      this.id = id;
      this.label = label;
      this.source = source;
      this.target = target;
    }

    function getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    }
    // var id1 = "GO:0016321";
    // var id2 = "GO:0030970";
    var id1 = getQueryString("id1");
    var id2 = getQueryString("id2");

    var networ_json = {
      dataSchema: {
        nodes: [{
          name: "label",
          type: "string"
        }, {
          name: "score",
          type: "number"
        }, {
          name: "weight",
          type: "string"
        }],

        edges: [{
          name: "label",
          type: "string"
        }, {
          name: "weight",
          type: "number"
        }, {
          name: "directed",
          type: "boolean",
          defValue: true
        }]
      },

      data: {
        nodes: [{
          id: "n1",
          label: id1,
          weight: "parent"
          // score: 1.0
        }, {
          id: "n2",
          label: id2,
          weight: "parent"
          // score: 2.2
        }],

        edges: []
      }
    };
  </script>

  </html>